<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="~{common/header :: commonHead}">
    <title>角色详情</title>
</head>
<link rel="stylesheet" href="/layuiuse/css/layui.css">
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5 th:text="${null == editable ? '新增角色' : '编辑角色'}"></h5>
                    <div class="ibox-tools">
                    </div>
                </div>
                <div class="ibox-content">
                    <form class="row form-body form-horizontal m-t" method="post"
                          th:action="${null == editable ? '/sys/role/add' : '/sys/edit'}">
                        <input name="id" th:value="${editable?.id}" style="display: none">
                        <div class="col-md-12 droppable sortable ui-droppable ui-sortable">
                            <div class="form-group draggable ui-draggable dropped" style="position: static;">
                                <label class="col-sm-3 control-label">角色名称：</label>
                                <div class="col-sm-6">
                                    <input type="text" name="name" class="form-control" required="required"
                                           th:value="${editable?.name }" placeholder="请输入角色名称">
                                </div>
                            </div>

                            <div class="form-group draggable ui-draggable dropped" id="add-store-list">
                                <label class="col-sm-3 control-label">添加权限：</label>
                                <div class="col-sm-6">
                                    <div id="test1" class="tree"></div>
                                </div>
                            </div>
                            <div style="display: none">
                                <label for="permissionIds">权限id</label>
                                <input name="permissionIds" id="permissionIds" />
                            </div>
                            <div style="display: none">
                                <label for="vals">角色Id</label>
                                <input name="vals" id="vals" th:value="${null == editable ? null:editable?.id}" />
                            </div>
                            <div class="hr-line-dashed"></div>
                            <div class="form-group draggable ui-draggable">
                                <div class="col-sm-12 col-sm-offset-3">
                                    <button class="btn btn-primary" onclick="submitForm()">保存内容</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
    .tree {
        border: 1px solid black;
        width: 600px;
        /*height: 100vh;*/
        display: block;
        margin: auto;
        overflow-y: scroll;
        overflow-x: scroll;
        position: relative;
        padding-left: 20px;
    }

    a {
        text-decoration: none;
        color: #555;
    }

    ul li {
        list-style-type: none;
        margin-left: -10px;
        position: relative;
    }

    .tree input{cursor: pointer;}
    .tree span {
        font-size: 13px;
        cursor: pointer;
        display: inline-block;
        border: 1px solid #e2e2e2;
        width: 10px;
        line-height: 8px;
        text-align: center;
        height: 10px;
        background-color: whitesmoke;
        position: absolute;
        left: 8px;
        top: 4px;
    }
    .tree ul span{
        left: -16px;
    }
    .tree ul {
        width: 100%;
        list-style-type: none;
        margin-top: 0px;
        position: relative;
        padding-left: 40px;
    }
    .label:hover{
        box-shadow: 0 0 4px 0px #a0aefb;
    }
    .label{
        width: 18px;
        height: 18px;
        position: inherit;
        top: 4px;
        background-image: url(https://aquacityminpro.quanquankeji.cn/data/image/4883320200327.jpg);
        background-size: 100% 100%;
        display: inline-block;
        margin: 1px 5px 0 0;
    }
    input:checked + label {
        width: 19px;
        height: 19px;
        margin: 0 4px 0 0;
        background-image: url(https://aquacityminpro.quanquankeji.cn/data/image/5724520200327.jpg);
    }
    input{
        display: none;
    }
    .isShow{
        width: 14px;
        margin-right: 5px;
    }
    .label:empty{
        display: initial;
    }
</style>

<link rel="stylesheet" href="http://js.lucky8guy.xin/css/iconfont.css">
<script src="/layuiuse/layui.js"></script>

<script>

    function submitForm() {
        let selectCheckedIds = [];
        let checkedNodes = $.getCheckedNodes();
        console.log(checkedNodes);
        checkedNodes.forEach(node_p1 => {
            selectCheckedIds.push(node_p1.id);
            if (node_p1.children != null) {
                node_p1.children.forEach(node_p2 => {
                    selectCheckedIds.push(node_p2.id);
                    if (node_p2.children != null) {
                        node_p2.children.forEach(node_c3 => selectCheckedIds.push(node_c3.id));
                    }
                })
            }
        });
        console.log(checkedNodes);
        $("#permissionIds").val(checkedNodes);
    }
    $(function () {
        //    判断是编辑还是新增
        if($("#vals").val()==null){
            permission('/sys_permission/queryTest');
        }else{
            permission('/sys_permission/query_edit?roleId='+$("#vals").val())
        }
    });
    let tree = {};
    function permission(url) {
        $.ajax({
            url: url,
            type: 'get',
            async: true,
            success: function (returnData) {
                let treeData = returnData.data.permissionDTOS;
                console.log(treeData);
                $(".tree").tree(returnData.data.permissionDTOS, returnData.data.permissionIds);
                // layui.use('tree', function(){
                //     tree = layui.tree;
                //     var inst1 = tree.render({
                //         elem: '#test1',
                //         data: treeData,
                //         showCheckbox: true,
                //         id:'id',
                //         oncheck: function(obj){
                //             console.log(idTimes,times)
                //             if(idTimes>times++) return;
                //             console.log(obj.data.id,tree.getChecked('id')); //得到当前点击的节点数据
                //             if(window.selectCheckedIds.includes(obj.data.id)){
                //                 window.selectCheckedIds.splice(window.selectCheckedIds.findIndex((i)=>i==obj.data.id),1)
                //             }else{
                //                 window.selectCheckedIds.push(obj.data.id)
                //             }
                //             console.log(window.selectCheckedIds)
                //         }
                //     });
                //
                //     tree.setChecked('id', returnData.data.permissionIds)
                // });
            }
        })
    }
</script>
<script>
    ((global) => {
        //娣诲姞鐨刣om鏂规硶   $().xxx 鎴� leg().xxx
        $.fn.extend({
            tree(data, arrs) {
                var tree = this;

                $(tree).on("click", ".isShow", function() {
                    let that = this;
                    isShow(that);
                })

                function isShow(that) {
                    //:visible 鍒ゆ柇褰撳墠鍏冪礌鏄惁鍙銆�
                    if ($(that).parent().find("ul").is(":visible")) {
                        $(that).parent().find("ul").hide();
                        $(that).attr("style", 'transform:rotate(-90deg)');
                    } else {
                        if ($(that).parent().find("ul").length > 0) {
                            $(that).attr("style", 'transform:rotate(0deg)');
                        } else {
                            $(that).attr("style", 'opacity: 0;');
                        }
                        $(that).parent().find("ul").show();
                    }
                }
                //鍒ゆ柇鐖剁骇閫変腑鐘舵€�
                function checkParent(param) {
                    if ($(param).is(':checked')) {
                        $(param).parent().parent().prev().prev().prev().prev().prop("checked", 'true');
                    } else {
                        var temp = $(param).parent().parent().find("input");
                        var isChecked = false;
                        //鍒ゆ柇瀛愮骇鏄惁鏈塩hecked鐨勶紝娌℃湁灏卞彇娑堢埗绾х殑閫変腑鐘舵€�
                        $.each(temp, function(index, item) {
                            if (item.checked) {
                                isChecked = true;
                            }
                        });

                        if (!isChecked) {
                            $(param).parent().parent().prev().prev().prev().prev().removeAttr("checked");
                        }
                    }
                    var asd = $(param).parent().parent().prev().prev().prev().prev()[0];
                    if (asd != undefined) {
                        checkParent(asd)
                    }
                    return;
                }

                //鍒ゆ柇瀛愮骇閫変腑鐘舵€�
                function checkChildren(param) {
                    if (param.checked) {
                        $(param).next().next().next().next().children().find("input").prop("checked", 'true');
                    } else {
                        $(param).next().next().next().next().children().find("input").removeAttr("checked");
                    }
                }

                $(tree).on("click", "input", function() {
                    //鍏堝瓙绾у湪鐖剁骇閬垮厤鍑洪敊锛堢埗绾ч噷闈㈡湁鍒ゆ柇瀛愮骇鏄惁閫変腑鐨勶級
                    if (data[0].cascade) {
                        checkChildren(this);
                        checkParent(this);
                    }
                })

                //浣跨偣鍑籥鏍囩绛夊悓浜庣偣鍑� input
                $(tree).on("click", "a", function() {
                    if ($(this).prev().prev().prev()[0].checked) {
                        $(this).prev().prev().prev().removeAttr("checked");
                    } else {
                        $(this).prev().prev().prev().prop("checked", 'true');
                    }
                    //鍒ゆ柇鏄惁涓哄瓙鐖剁骇鑱�
                    if (data[0].cascade) {
                        checkChildren($(this).prev().prev().prev()[0]);
                        checkParent($(this).prev().prev().prev()[0]);
                    }
                })

                //id鐩哥瓑灏遍€変腑
                const insert = (children, arr) => {
                    for (var a in arr) {
                        if (children.id == arr[a]) {
                            children.checked = true
                        }
                    }
                }

                //璁剧疆tree鑺傜偣鏄惁閫変腑
                function setCheckedNodes(data, arrs) {
                    for (let x in data) {
                        let children = data[x].children;
                        if (children != null) {
                            for (let y in children) {
                                insert(children[y], arrs)
                                setCheckedNodes(children, arrs);
                            }
                        } else {
                            return;
                        }
                    }

                }

                //閫掑綊
                var ids = 0;

                function createTree(data) {
                    var str = '<ul>';
                    for (var i = 0; i < data.length; i++) {
                        ids++;
                        str +=
                            '<li><img class="isShow" src="/img/WechatIMG365.pic" />'
                        if (data[i].checked == true) {
                            str += '<input id="' + ids + '" type="checkbox" checked ' +
                                'data-show="' + data[i].open + '" value="' + data[i].id + '"/>'
                        } else {
                            str += '<input id="' + ids + '" type="checkbox" ' +
                                'data-show="' + data[i].open + '" value="' + data[i].id + '"/>'
                        }
                        str += '<label class="label" for="' +
                            ids + '"/><i class="' + data[i].ico + '"/><a href="#">' + data[i].name + '</a>';
                        if (data[i].children && data[i].children != '') {
                            str += createTree(data[i].children);
                        }
                        str += '</li>';
                    };
                    str += '</ul>';
                    return str;
                };

                //閫氳繃ID閫変腑
                if (arrs.constructor == Array) { //鍒ゆ柇鏄惁涓烘暟缁�
                    setCheckedNodes(data, arrs);
                }

                //鎶婃爲鏀惧埌瀹瑰櫒
                $(tree).html(createTree(data));

                //閫氳繃鍘熷鏁版嵁閫変腑
                $.each($("input:checkbox:checked"), function() {
                    checkParent(this)
                });

                //鏄惁灞曞紑
                $.each($(".tree input"), function() {
                    if (this.getAttribute('data-show') == 'false') {
                        $(this).parent().find("ul").hide();
                        $(this).prev()[0].setAttribute("style", 'transform:rotate(-90deg)');

                    } else {
                        $(this).parent().find("ul").show();
                        if ($(this).parent().find("ul").length > 0) {
                            console.log($(this).prev()[0])
                            $(this).prev()[0].setAttribute("style", 'transform:rotate(0deg)');
                        } else {
                            $(this).prev()[0].setAttribute("style", 'opacity: 0;');
                        }
                    }
                });
            },
        })

        //娣诲姞鐨�$.xxx() 鎴栬€卨eg.xxx()
        $.extend({
            getCheckedNodes() { //鑾峰彇閫変腑id闆嗗悎
                var arr = []
                $.each($('input:checkbox:checked'), function() {
                    let temp = $(this).val();
                    if (temp != "" && temp != "undefined") {
                        arr.push($(this).val())
                    }
                });
                return arr;
            }
        });

        global.leg = global.$ = $;

    })(window)
        </script>
</body>
</html>